<template>
  <view class="content" @tap="moreshowClose">
    <view class="shopInfo">
      <view class="topImg" :style="{ backgroundImage: 'url(' + backimage + ') ' }"  @click="previewBg">
        <view class="word"></view>
        <view class="topstyle" :style="'margin-top:' + statusBarHeight + 'px;'">
          <u-icon @tap="goback" color="#FFFFFF" size="40" name="arrow-left"></u-icon>
        </view>
        <view class="topRight" :style="'margin-top:' + statusBarHeight + 'px;'">
          <view style="width: 48rpx; height:48rpx;z-index: 666; border-radius:4rpx; padding:7rpx;">
            <image @tap.stop="iphone" src="../static/image/pagesDelivery/iPhone.png" alt />
          </view>
          <view style="width: 48rpx; height:48rpx; z-index: 666; border-radius:4rpx; padding:7rpx; "
            @tap.stop="collection('hasCollect')" v-if="hasCollect">
            <u-icon name="star-fill" color="#ff0000" size="36"></u-icon>
          </view>
          <view style="width: 48rpx; height:48rpx; z-index: 666; border-radius:4rpx; padding:7rpx;"
            @tap.stop="collection('notCollect')" v-else>
            <image src="../static/image/pagesDelivery/collection.png" alt />
          </view>
          <view
            style="width:48rpx; height:48rpx; position:relative;z-index: 666; border-radius:4rpx;padding:0 8rpx;">
            <image @tap.stop="moreclick" class="moreimg" src="../static/image/pagesDelivery/more.png" alt />
            <view v-show="more"
              style="position:absolute; background-color:white; left:-137rpx; top:60rpx; z-index:999; box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.2);border-radius: 12rpx 12rpx 12rpx 12rpx; font-family: PingFang SC, PingFang SC; font-weight: 400;  color: #000000;">
              <view style="padding:24rpx 32rpx 18rpx 32rpx; border-bottom:1rpx solid #ccc;" @tap.stop="share">
                <text>分享商家</text>
              </view>
              <view @tap.stop="shopiphone" style="padding:24rpx 32rpx 18rpx 32rpx; border-bottom:1rpx solid #ccc;">
                <text>联系商家</text>
              </view>
              <view @tap.stop="moreclick" style="padding:24rpx 32rpx 18rpx 32rpx; border-bottom:1rpx solid #ccc;">
                <text v-if="hasCollect" @tap="collection('hasCollect')">取消收藏</text>
                <text v-else @tap="collection('notCollect')">收藏商家</text>
              </view>
              <view mode="bottom" @tap.stop="openReport"
                style="padding:24rpx 32rpx 18rpx 32rpx; border-bottom:1rpx solid #ccc;">
                <text>举报商家</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="shopBox">
        <view class="shopName">
          <view class="shopAddress">{{ shopdetails.merchantName }}</view>
          <view class="shopStar">
            <view class="star">
              <!-- <image :src="item.img" mode v-for="(item, index) in starimg" :key="index" /> -->
              <!--  v-show="indexStar + 1 < bigStar" -->
              <image src="../static/image/pagesDelivery/Star.png"
                v-for="(itemStar, indexStar) in Math.floor(shopdetails.merchantScore)" :key="indexStar" />
              <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="shopdetails.merchantScore % 1 !== 0" />
            </view>
            <view class="score">
              <text>{{ shopdetails.merchantScore + (Number.isInteger(shopdetails.merchantScore) ? '.0' : '') }}</text>
            </view>
            <!-- <view class="startwo">
							<image v-show="!handoffstar" src="../static/image/pagesDelivery/Star.png" alt />
							<image v-show="handoffstar" src="../static/image/pagesDelivery/startwo.png" alt />
						</view>
						<view class="scoretwo">
							<text @tap="handclick" v-show="handoffstar">收藏店铺</text>
							<text style="color: red" @tap="handclick" v-show="!handoffstar">取消收藏</text>
            </view>-->
          </view>
          <view class="shopTime">
            <text>营业时间：{{ shopdetails.merchantTime }}</text>
          </view>
          <view class="distriBution">
            <text v-if="this.distance < 1" class="distance">约{{ parseFloat(distance*1000).toFixed(2) }}m</text>
            <text v-if="this.distance > 1" class="distance">约{{ parseFloat(distance).toFixed(2) }}km</text>
   
            <text class="shoptext">|</text>
            <text class="shoptext">{{ shopdetails.merchantAnnouncement }}</text>
            <text class="shoptext">起送费￥{{ shopdetails.merchantDelivery }}</text>
          </view>
          <view class="announcement">
            <text>公告：{{ shopdetails.merchantIntroduce }}</text>
          </view>
          <view style="width: 100%;display: flex;justify-content:space-between;">
            <view style="width: 600rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">
              <text>{{ shopdetails.merchantAddress }}</text>
            </view>
            <view>
              <text @tap="gotomap" style="color: #0057FF;">导航</text>
            </view>
          </view>
        </view>
        <view class="shopImg">
          <image :src="shopdetails.merchantHead" alt  @click="preview" mode="widthFix"/>
        </view>
      </view>
      <!-- tab栏切换动态改变激活样式 -->
      <view class="shopNav">
        <view class="nav">
          <view class="nav-list" v-for="(item, index) in list" :key="item.id" @tap="changeAct(item)">
            <!-- 激活样式名字是红色 判断act==index 和act==item.id都行-->
            <view :class="[act == index ? 'name' : '']">
              <text>{{ item.name }}</text>
              <text v-if="index == 1">{{ total }}</text>
            </view>
            <!-- 名字下面的横线 -->
            <view :class="[act == index ? 'line' : '']"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容的改变 -->
    <view class="contenttabs" v-if="content.id === 0">
      <view class="container">
        <!-- <view class="container" :style="`height:calc(100vh - ${contentHeight}px )`"> -->
        <!-- 左侧fixed导航区域 -->
        <scroll-view class="left" :scroll-y="true" @scroll="scroll">
          <view v-for="(item, index) in leftList" :key="index" class="left_item"
            :class="index == selectedId ? 'selected' : ''" @tap="leftItemClick(index)">{{ item.productLabelName }}
          </view>
        </scroll-view>

        <!-- 右侧内容区域 -->
        <scroll-view class="right" :scroll-y="true" @scroll="scroll" :scroll-top="scrollTop" @scrolltolower="lower">
          <view @tap="goshopdetail(item)" v-for="(item, index) in rightList" :key="index" class="right_item">
            <view style="width: 156rpx; height: 132rpx; border-radius: 6rpx; overflow: hidden;">
              <image style="width: 100%; min-height: 132rpx;border-radius: 6rpx;" mode="widthFix" :src="item.productImg" alt />
            </view>
            <view class="goods">
              <view style="display:flex;">
                <view style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                  <text class="goodsname">{{ item.productName }}</text>
                </view>
                <view>
                  <text>({{ item.commodityWeight }}{{ item.commodityWeightUnit }})</text>
                </view>
              </view>
              <view class="Sold">
                <text>已售{{ item.productSalesVolume?item.productSalesVolume:'0' }}</text>
              </view>
              <view class="goodsPrice" @tap.stop="">
                <view style="display: flex; justify-content: space-between;">
                  <view @tap="goshopdetail(item)">
                    <text style="font-size: 20rpx;">￥</text>
                    <text class="priceNum">{{ (item.productPrice / 100).toFixed(2) }}</text>
                  </view>
                  <view v-if="item.productStockType >= 3 || item.productStockType < 3 && item.productValue > 0" >
                    <view class="compute">
                      <image @tap.stop="delgoods(item.productId)" v-show="item.rightType" class="delimg"
                        src="../static/image/pagesDelivery/delimg.png" alt />
                      <text v-show="item.rightType">{{ item.productCount }}</text>
                      <image @tap.stop="addgoods(item, item.productId)" class="addimg"
                        src="../static/image/pagesDelivery/add.png" alt />
                    </view>
                  </view>
                  <view v-else style="color: #ccc;">售空</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view v-show="hideshop" class="bottomshop">
      <view class="shopcar">
        <view class="round" @tap="stopshop">
          <image src="../static/image/pagesDelivery/round.png" mode="scaleToFill" />
          <view class="shoprightnum">
            <text>{{ totalnum }}</text>
          </view>
        </view>
        <view class="choose" @tap="stopshop">
          <view class="chooseprice">
            <text style="font-size:32rpx;">￥</text>
            <text>{{ shoplist / 100 }}</text>
          </view>
          <view class="choosegoods">
            <text v-show="!runmoney">未选商品</text>
            <text v-show="runmoney">配送费￥{{ distributiondata }}</text>
          </view>
        </view>
        <view @tap="ordersshow" class="choosebutton">
          <text>提交订单</text>
        </view>
      </view>
    </view>
    </view>
    <!-- 评论 -->
     <scroll-view scroll-y style="height: 900rpx;" v-if="content.id === 1" >
      <view class="contenttabs" style="padding: 32rpx;">
        <view class="comments" v-for="(item, index) in commentslist" :key="index">
          <view class="commentone">
            <view>
              <image class="avatar" src="../static/image/pagesMine/user.png" mode="scaleToFill" />
            </view> 
            <view style="flex:1;">
              <view class="person">
                <view>
                  <text>匿名</text>
                </view>
                <view class="datatime">{{ item.evaluateCreateTime }}</view>
              </view>
              <view style="display: flex;">
                <image src="../static/image/pagesDelivery/Star.png" v-for="(itemStar, indexStar) in Math.floor(item.userRatingType)" :key="indexStar" />
                <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="item.userRatingType % 1 !== 0" />
              </view>
            </view>
          </view>
          <view class="commenttwo">{{ item.userEvaluate }}</view>
          <view :class="index+1 === commentslist.length ? 'commentfour' : 'commentthree'">
            <view v-for="(item, index) in item.evaluateAge" :key="index">
              <view class="evaluateImg"><image :src="item.evaluateAge" style="width: 100%;min-height: 140rpx;" mode="widthFix"  @click="preview2(item.evaluateAge)"/></view>
            </view>
          </view>
          <view v-if="item.merchantEvaluate" class="reply">
            <text>店家回复:{{ item.merchantEvaluate }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 详情 -->
    <view class="contenttabs" style="padding: 32rpx;" v-if="content.id === 2">
      <view class="detail">

        <view style="margin-top: 24rpx;">
          <text>商家电话：{{ shopdetails.customerCall }}</text>
        </view>
        <view style="margin-top: 24rpx;">
          <text>营业时间：{{ shopdetails.merchantTime }}</text>
        </view>
        <view style=" margin-top: 24rpx;">
          {{ shopdetails.merchantIntroduce }}
        </view>
      </view>
    </view>
  

    <!-- 底部背景模糊效果 -->
    <view class="bottomBg">
      <view class="blur-bg">
        <view class="blur-content"></view>
      </view>
    </view>
    <view @tap="popshow = false" v-show="popshow" class="popbox"></view>
    <view class="popupbox" v-show="popshow">
      <view class="popboxtop">
        <view>
          <image src="../static/image/pagesDelivery/basket.png" alt />
          <text class="Selected popboxtext">已选择</text>
        </view>
        <view>
          <text class="empty popboxtext" @tap="emptyshop">清空</text>
        </view>
      </view>
      <scroll-view :scroll-y="true" :style="shopArr.length>6?'height:600rpx;':'height:auto;'" class="popboxbottom">
        <view v-for="(item, index) in shopArr" :key="index" class="popboxbottomlist">
          <view style="display: flex; justify-content: flex-start; ">
            <text>{{ item.productName }}</text>
          </view>
          <view class="popcompute">
            <view style="padding:0 20rpx;">
              <text>￥{{ ((item.productPrice * item.productCount) / 100).toFixed(2) }}</text>
            </view>
            <view style="display: flex;justify-content: center;align-items: center;">
              <u-icon size="23" color="#D12C25" @tap="delgoods(item.productId)" name="minus"></u-icon>
              <!-- <text @tap="delgoods(item.id)" class="adddelstyle">-</text> -->
              <text style="margin: 0 12rpx;">{{ item.productCount }}</text>
              <!-- <text @tap="addgoods(item.id)" class="adddelstyle">+</text> -->
              <u-icon color="#D12C25" @tap="addgoodstwo(item, item.productId)" name="plus"></u-icon>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <u-popup v-model="reportpop" mode="bottom" border-radius='12'>
      <view class="report">
        <view class="flexB" style="display:flex; justify-content: space-between; ">
          <view class="fs-32">
            举报内容
          </view>
          <view class="" @tap="reportpop = false">
            <u-icon name="close" color="#7A7D99" size="28"></u-icon>
          </view>
        </view>
        <u-form :model="reportForm" ref="uForm">
          <u-form-item label-width="150" label="举报类型" prop="choose"
            style="padding: 0 24rpx; border:1rpx solid #ccc;  margin-top:24rpx;  border-radius:12rpx;">
            <view @tap="reportFormTypeShow = true" style="display:flex; width:100%; justify-content: space-between;">
              <text>{{ reportForm.choose }}</text>
              <text class="icon">&#xe62d;</text>
            </view>
          </u-form-item>
          <u-form-item label-width="150" label="下单状态"
            style="padding: 0 24rpx; border:1rpx solid #ccc;  margin-top:24rpx;  border-radius:12rpx;">
            <view style="display:flex; width:100%;">
              <view @tap="orderSelect = 0" style="margin:0 28rpx; display:flex; align-items:center;">
                <image src="/static/image/radioSelect.png" mode="" v-if="orderSelect == 0"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <image src="/static/image/radionoSelect.png" mode="" v-if="orderSelect != 0"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <text>已下单</text>
              </view>
              <view @tap="orderSelect = 1" style="display:flex; align-items:center;">
                <image src="/static/image/radioSelect.png" v-if="orderSelect == 1"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <image src="/static/image/radionoSelect.png" v-if="orderSelect != 1"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <text>未下单</text>
              </view>
            </view>
          </u-form-item>
          <u-form-item label-width="150" label="" prop="uploadimg"
            style="padding: 0;margin-top:24rpx;border-radius: 12rpx;display: flex;">

            <view class="pre-box" @tap="uploadimg">
              <u-upload width="180" height="180" :custom-btn="true" @on-choose-fail="onChooseFail"
                :before-remove="beforeRemove"  ref="uUpload" :show-upload-list="true" :action="action"
                :auto-upload="true" :file-list="fileList" :show-progress="true" :deletable="true" :header="uploadToken"
                :max-count="6" @on-list-change="onListChange" :on-remove="uploadRemove" @on-success="uploadSuccess" @on-change="handleUploadChange" :size-type="['compressed']" :max-size="FileSize">
                <view slot="addBtn">
                  <image src="/static/image/upload_icon.png" mode=""
                    style="width: 150rpx;height: 150rpx;border-radius: 12rpx;"></image>
                </view>
              </u-upload>
            </view>
          </u-form-item>
          <u-form-item label="电话" prop="iphone"
            style="padding: 0 24rpx; border:1rpx solid #ccc;   border-radius:12rpx;">
            <u-input placeholder="请输入电话" v-model="reportForm.iphone" maxlength="11" />
          </u-form-item>
          <u-form-item label="" prop="textinput"
            style="padding: 0 24rpx; border:1rpx solid #ccc; margin-top:24rpx; border-radius:12rpx;">
            <u-input placeholder="请填写举报内容" v-model="reportForm.textinput" type="textarea" :height="100"
              :auto-height="true" />
          </u-form-item>
        </u-form>
      </view>
      <view style="margin: 0 32rpx 200rpx 32rpx;">
        <u-button style="border-radius: 1998rpx ;" @tap="reportSubmit" type="error">确定</u-button>
      </view>
    </u-popup>
    <u-popup v-model="reportcen" mode="center" border-radius="14">
      <view style="width: 670rpx; height: 436rpx;">
        <view style="margin:40rpx 32rpx 80rpx 32rpx; display:flex; justify-content:space-between;">
          <view>举报完毕</view>
          <view @tap="reportclose">
            <u-icon name="close"></u-icon>
          </view>
        </view>
        <view
          style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: rgba(0,0,0,0.5); text-indent: 2em; margin:0 32rpx;">
          感谢您的配合，经核实举报内容信息真实后，平台将对商家进行处罚</view>
        <view style="margin:80rpx 62rpx 40rpx 62rpx; ">
          <u-button style="border-radius: 1998rpx ;" @tap="reportclose" type="error">确定</u-button>
        </view>
      </view>
    </u-popup>
    <!-- 举报商家 类型 -->
    <u-picker mode="selector" v-model="reportFormTypeShow" :default-selector="[0]" :range="reportFormTypeSelector"
      @confirm='reportFormTypeConfirm' range-key="name"></u-picker>
	  <ykAuthpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="WRITE_EXTERNAL_STORAGE" :style="'margin-top:' + statusBarHeight + 'px;'"></ykAuthpup>
	  <ykAuthpup ref="authpupPhone" type="top" @changeAuth="changeAuthphone" permissionID="CALL_PHONE"></ykAuthpup>
  </view>
</template>

<script>
import { debounce } from 'lodash';
import { selectProductLabelList, selectProduct } from '@/api/delivery'
import { collectMerchant, selectEvaluateId, insertReport, selectMerchant, getTakeoutFee, IsMerchant as IsMerchantReq } from '@/api/common'
import { BASE_URL_IMG } from '@/api/request'
import { FileSize } from '@/common/fileSize';
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
let that = null;
export default {
	components: {
		ykAuthpup
	},
  data() {
    return {
      FileSize,
      reportvalue: '',
      statusBarHeight: 0,
      uniPlatform: uni.getStorageSync("uniPlatform"),
      act: 0,
      list: [
        {
          id: 0,
          name: "商品"
        },
        {
          id: 1,
          name: "评价",
          num: 1234
        },
        {
          id: 2,
          name: "详情"
        }
      ],
      content: 0,

      leftList: [

      ],
      rightList: [

      ],
      selectedId: 0, //左边当前选中id
      itemTopArr: [], //右侧所有item的top数组
      timeoutID: null,
      runmoney: false,
      popshow: false,
      shopArr: [],
      shoparrnum: 0,
      handoffstar: true,
      //评论数据
      commentslist: [],
      hideshop: true,
      detaillist: [],
      ordersbutton: false,
      Toii: true,
      handoff: false,
      backaddlist: [],
      addshow: false,
      more: false,
      reportpop: false,
      listorders: [
        {
          title: "已下单"
        },
        {
          title: "未下单"
        }
      ],
      valuereport: "已下单",
      form: {
        iphone: null,
        business: ''
      },
      orderSelect: 0,

      filesArr: [],
      contentHeight: 0,
      hasCollect: false, //是否已经收藏店铺，
      reportFormTypeShow: false, //举报商家 类型
      reportFormTypeSelector: [
        {
          id: 1,
          name: '刷销量'
        },
        {
          id: 2,
          name: '刷评价'
        },
        {
          id: 3,
          name: '引导收藏,转单'
        },
        {
          id: 4,
          name: '其他'
        },
      ],
      reportForm: {
        iphone: null, //电话
        choose: '',
        orderstatus: '',
        textinput: ''
      }, //投诉商家form
      shoplistid: '',
      shopdetails: [],
      distance: 0,
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      action: '',
      fileList: [],
      nowFileList: [],
      uploadToken: {
        Authorization: ''
      },
      latAndLong:{},
      lists: [],
      reportcen: false,
      datatype: 0,
      listshop: [],
      reportRules: {
        iphone: [{
          type: "number",
          required: true,
          message: "请输入手机号",
          trigger: ["change", "blur"]
        },
        {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // this.$u.test.mobile()就是返回true或者false的
            return this.$u.test.mobile(value);
          },
          maxlength: 11,
          message: "手机号码不正确",
          // 触发器可以同时用blur和change
          trigger: ["blur"]
        }
        ],
        choose: [
          {
            type: "string",
            required: true,
            message: "请选择",
            trigger: ["change", "blur"]
          }
        ],

        textinput: [
          {
            type: "string",
            required: true,
            message: "请输入举报内容",
            trigger: ["change", "blur"]
          }
        ]
      },
      backimage: '',
      commentsnum: 0,
      total: 0,
      distributiondata:null,
      scrollTop:0,
      oldScrollTop:0
    };
  },
  onReady() {

  },
  onLoad(options) {
    this.action = BASE_URL_IMG
    this.uploadToken.Authorization = uni.getStorageSync('token')
    this.shoplistid = options.detailid
    console.log('商家电话',options);
    this.distance = options.distance
    that = this;
    that.statusBarHeight = uni.getStorageSync("statusBarHeight");
    that.latAndLong=uni.getStorageSync('latAndLong')
    console.log('看看经纬度', that.latAndLong)
    this.getshoplist();
    this.getcommentslist()
    // this.getItemTopArr();
	if(this.uploadToken.Authorization != "") {
		this.IsMerchant()	
	}
  },
  onShow() {
    this.content = this.list[this.act];
  },
  mounted() {
    const query = uni.createSelectorQuery().in(that);
    query.select(".shopInfo").boundingClientRect(data => {
      that.contentHeight = data.height;
    }).exec();
  },
  computed: {
    //计算购物车商品总价
    shoplist() {
      let total = 0;
      this.shopArr.forEach(item => {
        console.log('看看总价', item)
        if (item.rightType) {
          total += item.productPrice * item.productCount;
        }
      });
      return total;
    },
    totalnum() {
      let total = 0;
      this.shopArr.forEach(item => {
        if (item.rightType) {
          total += item.productCount;
        }
      });
      return total;
    },
    ordersnum() {
      let total = 0;
      this.shopArr.forEach(item => {
        if (item.rightType) {
          total += item.productCount;
        }
      });
      return total;
    },
    ordersprice() {
      let total = 0;
      this.shopArr.forEach(item => {
        if (item.rightType) {
          total += item.price * item.productCount;
        }
      });
      return total;
    },
    canPop() {
      return this.totalnum > 0;
    },
    canpoptwo() {
      return this.ordersnum > 0;
    }
  },
  methods: {
	  IsMerchant() {
	  		  IsMerchantReq({ merchantId: this.shoplistid }).then(res => {
				  if (res.data.favoriteMerchant == 1) {
				    this.hasCollect = true
				  } else {
				    this.hasCollect = false
				  }
	  		  })
	  },
	  //权限说明组件弹框
	  uploadimg(){
	    this.$refs['authpup'].open();
	  },
	  changeAuth(){
	  	console.log('同意后执行');
		this.onListChange()
		this.beforeRemove()
		this.onChooseFail()
		this.uploadRemove()
		this.uploadSuccess()
	  },
    // 商家背景
    previewBg() {
      uni.previewImage({
        urls: [this.backimage], // 需要预览的图片链接列表
      });
    },
    // 商家头像
    preview() {
      uni.previewImage({
        urls: [this.shopdetails.merchantHead], // 需要预览的图片链接列表
      });
    },
    preview2(img) {
  
      uni.previewImage({
        urls: [img], // 需要预览的图片链接列表
      });
      
    },
    //举报商家
    scroll (e) {
            //记录scroll  位置
            this.oldScrollTop = e.detail.scrollTop
    },
    openReport(){
      this.nowFileList = []
      this.reportpop = true;
      this.reportForm.iphone = ''
      this.reportForm.choose = ''
      this.reportForm.orderstatus = ''
      this.reportForm.textinput = ''
      this.lists = []
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      console.log(this.$refs);
      if(this.uploadToken.Authorization) {
        this.$nextTick(() => {
          that.$refs.uForm.setRules(that.reportRules);
        });
      } else {
        let fromPage=true
        uni.redirectTo({
			url: `/pages/login/login?fromPage=${fromPage}`
		})	
      }
    },
    //举报商家接口
    getreport() {
      console.log('看看数据', this.nowFileList)
      let obj = {
        merchantName: this.shopdetails.merchantName,
        merchantId: this.shopdetails.merchantId,
        reportType: this.datatype,
        reportOrderStatus: this.orderSelect + 1,
        reportContents: this.reportForm.textinput,
        reportImg: this.nowFileList,
        userPhone: this.reportForm.iphone,
        deptId:this.shopdetails.deptId
      }
      insertReport(obj).then(res => {
        console.log('举报商家数据看看看', res)
        if(res.code == 200){
          this.reportpop = false;
        }
        
      })
    },
    handleUploadChange(file){
      console.log('handleUploadChangefile',file)
    },
    // 调取评论接口
    getcommentslist() {
      let obj = {
        merchantId: this.shoplistid,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // merchantId:this.shoplistid
      }
      selectEvaluateId(obj).then(res => {
        if (this.pageNum == 1) {
          this.commentslist = res.data.appPromerProEvaMiddles
          this.total = res.data.total
          console.log('评论列表', this.commentslist)
        } else {
          this.commentslist = this.commentslist.concat(res.data.appPromerProEvaMiddles)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
      })
    },

    //店铺详情
    getshoplist() {
      let obj = {
        merchantId: this.shoplistid,
      }
      selectMerchant(obj).then(res => {
        this.shopdetails = res.data
        console.log('店铺详情', this.shopdetails)
        this.backimage = res.data.merchantHead
        this.distribution()
        this.getleftlist();
      })
    },
    // 商品左侧
    getleftlist() {
      let obj = {
        merchantId: this.shoplistid
      }
      selectProductLabelList(obj).then(res => {
        this.selectedId = 0
        this.leftList = res.data
        this.getrightlist()
      })
    },
    //商品右侧
    getrightlist() {
      let obj = {
        productMerchantId: this.shoplistid,
        productLabelId: this.leftList[this.selectedId].productLabelId,
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }
      selectProduct(obj).then(res => {
		  console.log('看看商品数据',res);
        res.data.forEach(item => {
          item.productValue = parseInt(item.productValue)
          item.productCount = 0
          item.rightType = false
        });
        // this.rightList = res.data
        if (this.pageNum == 1) {
          this.rightList = res.data
        } else {
          this.rightList = this.rightList.concat(res.data)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
        this.shopArr.forEach((item) => {
          const index = this.rightList.findIndex((item2) => item2.productId === item.productId);
          if (index !== -1) {
            this.rightList.splice(index, 1, item);
          }
        });
      })
    },
    distribution(){
      let obj={
        userLng:this.latAndLong.longitude,
        userLat:this.latAndLong.latitude,
        merchantLng:this.shopdetails.lng,
        merchantLat:this.shopdetails.lat,
      }
      getTakeoutFee(obj).then(res=>{
        console.log('配送费',res)
        this.distributiondata=res.data
      })
    },
    //分享
    share() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "https://agreement.hxzx365.com/agent/",
        title: this.shopdetails.merchantName,
        summary: this.shopdetails.merchantAddress,
        imageUrl: this.shopdetails.merchantHead,
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
          if(err.errCode == -8){
            uni.showToast({
              title:"未安装微信",
              icon:'none'
            })
          }
        }
      });
    },

    changeAct(item) {
      console.log(item.id);
      if (item.id === 0) {
        this.pageNum = 1
        this.pagesStatus = false
        this.hideshop = true;
      } else if (item.id == 1) {
        this.pageNum = 1
        this.pagesStatus = false
        this.getcommentslist()
      } else{
        this.pageNum = 1
        this.pagesStatus = false
        this.hideshop = false;
      }
      // 激活样式是当前点击的对应下标--list中对应id
      this.act = item.id;
      console.log('我看看这个act',this.act);
      // 可以根据点击事件改变内容
      this.content = item;
    },
    //左侧item点击
    leftItemClick(indexid) {
      this.pageNum = 1
      this.selectedId = indexid;
      this.getrightlist()
      this.scrollTop = this.oldScrollTop
      //当视图渲染结束 重新设置为0
      this.$nextTick(() =>{
          this.scrollTop = 0
      });
    },
  

    stopshop() {
      if (this.canPop) {
        this.popshow = !this.popshow;
      } else {
      }
    },

    //增加商品
    addgoods(item, id) {
      console.log('看看天机内容', item)
      let shop = item
      let rightshop = this.rightList.find(item => item.productId == id);
      console.log('看一眼添加', rightshop)
      rightshop.rightType = true;
      if (shop.productValue > rightshop.productCount || shop.productStockType == 3) {
        rightshop.productCount += 1;
        this.shoparrnum++;
        this.runmoney = true;
        // 判断shopArr中是否存在相同的shop
        let index = this.shopArr.findIndex(item => {
          return item.productId === rightshop.productId && item.productCount === rightshop.productCount;
        });
        if (index !== -1) {
          console.log("存在", JSON.parse(JSON.stringify(this.shopArr[index])));
          // this.shopArr[index].productCount+=1;
        } else {
          console.log("不存在");
          this.shopArr.push(rightshop);
        }
      } else {
        this.$u.toast('抱歉，当前库存不满足您的下单商品数量，请修改商品数量重新下单')
      }
    },
    //增加商品
    addgoodstwo(item, id) {
      let shoptwo = item
      let rightshop = this.shopArr.find(item => item.productId == id);
      rightshop.rightType = true;
      if (shoptwo.productValue > rightshop.productCount || shoptwo.productStockType == 3) {
        rightshop.productCount += 1;
        this.shoparrnum++;
        this.runmoney = true;
        // 判断shopArr中是否存在相同的shop
        let index = this.shopArr.findIndex(item => {
          return item.productId === rightshop.productId && item.productCount === rightshop.productCount;
        });
        if (index !== -1) {
          console.log("存在", JSON.parse(JSON.stringify(this.shopArr[index])));
          // this.shopArr[index].productCount+=1;
        } else {
          this.shopArr.push(rightshop);
        }
      } else {
        this.$u.toast('抱歉，当前库存不满足您的下单商品数量，请修改商品数量重新下单')
      }
    },
    //减少商品 当商品数量=或<0按钮隐藏
    delgoods(id) {
      console.log(id);
      let rightshop = this.shopArr.find(item => item.productId == id);
      console.log('rightshop', rightshop)
      rightshop.productCount--;
      if (rightshop.productCount <= 0) {
        rightshop.rightType = false;
        rightshop.productCount = 0;
      }

      //当购物车没有数据时隐藏下方内容
      for (let i = 0; i < this.rightList.length; i++) {
        if (this.rightList[i].rightType) {
          this.runmoney = true;
          break;
        } else {
          this.runmoney = false;
        }
      }
      for (let i = 0; i < this.shopArr.length; i++) {
        console.log(this.shopArr[i].productCount, "看看");
        if (this.shopArr[i].productCount <= 0) {
          this.shopArr.splice(i, 1);
          console.log(this.shopArr, "看看");
        }
        if (this.shopArr.length == 0) {
          this.popshow = false;
        }
      }
      console.log(JSON.parse(JSON.stringify(this.shopArr)), "看看能获取到不");
    },
    //清空数据
    emptyshop() {
      console.log("看看清空");
      this.shopArr = [];
      this.popshow = false;
      this.runmoney = false;
      this.rightList.forEach(e => {
        e.rightType = false;
        e.productCount = 0
      });
      this.$forceUpdate();
    },
    handclick() {
      this.handoffstar = !this.handoffstar;
    },
    ordersshow: debounce(function () {
      let that = this;
      if (this.shopArr.length > 0 && this.shoplist / 100 >= this.shopdetails.merchantDelivery ) {
        uni.navigateTo({
          url: "/pagesDelivery/deliveryToPay",
          success: res => {
            let info = {
              shopArr: that.shopArr,
              merchantTakeout: 1,
              shoplist: that.shopdetails,
              distributiondata:that.distributiondata,
              distance:that.distance
              // shopdetails
            };
            res.eventChannel.emit("redactInfo", { info: info });
          }
        });
      } else if (this.shopArr.length <= 0) {
        this.$u.toast('请购买商品');
      } else if(this.shoplist / 100 < this.shopdetails.merchantDelivery){
        this.$u.toast('未达到起送费');
        console.log('未达到起送费');
      }
    }, 500),
    // 获取滚动条位置
    getScrollTop() {
      this.scrollTop = this.scrollTop + 1;
      if (this.scrollTop > 50) {
        this.canPop = true;
      }
    },
    changeAuthphone(){
			//这里是权限通过后执行自己的代码逻辑
			console.log('权限已授权，可执行自己的代码逻辑了');
      uni.makePhoneCall({
        phoneNumber: this.shopdetails.customerCall
      });
		},
    //查看电话号
    iphone() {
      this.$refs['authpupPhone'].open();
    },
    moreclick() {
      this.more = !this.more;
    },
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    reportSubmit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.getreport()
          this.reportpop = false;
          this.reportcen = true;
          console.log("验证通过");
        } else {
          console.log("验证失败");
        }
      });
      let files = [];
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      });
      // 如果您不需要进行太多的处理，直接如下即可
      // files = this.$refs.uUpload.lists;
      console.log('看看这个files', files);

    },

    //返回上一个页面
    goback() {
      uni.navigateBack({
        delta: 1
      });
    },

    //给商家打电话方法
    shopiphone() {
      uni.makePhoneCall({
        phoneNumber: this.shopdetails.customerCall
      });
    },
    //收藏接口
    collection: debounce(function () {
      let obj = {
        // merchantId:"1181b1fd01624ec2bcdd1707a62f15d9",
        merchantId: this.shoplistid
      }
      collectMerchant(obj).then(res => {
        console.log('收藏', res)
        this.hasCollect = !this.hasCollect
        this.$u.toast(res.data);
      })
    }, 300),
    //顶部导航接口
    gotomap() {
      that = this
      console.log('mapmap', that.shopdetails)
      uni.openLocation({

        latitude: parseFloat(that.shopdetails.lat),
        longitude: parseFloat(that.shopdetails.lng),
        name: that.shopdetails.merchantName,
        address: that.shopdetails.merchantAddress,
        success: function () {
          console.log('success');
        }
      });
    },
    moreshowClose() {
      if (this.moreShow) {
        this.moreShow = false
      }
    },
    // 举报选择展示
    reportFormTypeConfirm(data) {
      this.datatype = this.reportFormTypeSelector[data].id
      this.reportForm.choose = this.reportFormTypeSelector[data].name
      console.log('看看typedata', this.datatype);
    },
    deleteItem(index) {
      console.log('1')
      this.$refs.uUpload.remove(index);
    },
    onListChange(lists,file) {
      console.log('onListChange', lists);
      this.lists = lists;
    },
    beforeRemove(index, lists) {
      console.log("aaa", this.lists[index]);
      this.nowFileList.splice(index, 1)
      console.log('this.nowFileList', this.nowFileList)
      // return true;
    },
    onChooseFail(e) {
      console.log(e);
    },
    uploadRemove(e) {
      // this.nowFileList.push(e.data)

      console.log("aaa", e);
    },
    uploadSuccess(e) {
      this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    reportclose() {
      this.reportcen = false;
      this.more = false;
      this.reportpop = false;
      this.form.iphone = null
    },
    goshopdetail(item) {
      that = this
      console.log('看看要带的数据', item)
      uni.navigateTo({
        url: '/pagesDelivery/deliveryShopDetail',
        success: (res) => {
          let info = {
            merchantId: that.shopdetails.merchantId,
            id: item.productId,
            name: item.productName,
            announcement: that.shopdetails.merchantIntroduce,
            distance: that.distance,
            give: that.shopdetails.merchantDelivery,
            address: that.shopdetails.merchantAddress,
            time: that.shopdetails.merchantTime,
            phone: that.shopdetails.merchantMobile,
            image: item.productImg,
            productmaterial: item.productMaterial,
            distributiondata:that.distributiondata,
            commodityWeight:item.commodityWeight,
            commodityWeightUnit:item.commodityWeightUnit,
			imageData:item.productDetailsImg
          }
          res.eventChannel.emit('redactInfo', { info: info })
        },
      })
    },
    lower(){
      console.log("触底",this.pagesStatus);
      if (this.pagesStatus) {
        this.pageNum++
        this.getrightlist()
      }
    }
  },
  //评论页数增加
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
  },
};
</script>

<style scoped lang="scss">
.content {
  // height: auto !important;
  ::v-deep .u-navbar::after {
    display: none !important;
  }

  .shopInfo {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .topImg {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 32rpx 80rpx;
    background-color: white;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;

    .word {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      left: 0;
      top: 0;
      z-index: 2;
    }

    .topstyle {
      width: 48rpx;
      height: 48rpx;
      border-radius: 4rpx;
      padding: 6rpx;
      z-index: 666;
    }

    .topRight {
      display: flex;
      justify-content: space-between;
      width: 226rpx;

      image {
        width: 36rpx;
        height: 36rpx;
      }

      .moreimg {
        margin-top: 12rpx;
        width: 36rpx;
        height: 12rpx;
      }
    }
  }

  .shopBox {
    position: relative;
    background: white;
    border-radius: 12rpx 12rpx 0rpx 0rpx;

    .shopName {
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      flex-direction: column;
      padding:0 32rpx 18rpx 32rpx;

      .shopAddress {
        line-height: 50rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        margin-top: 20rpx;
      }

      .shopStar {
        height: 46rpx;
        display: flex;
        align-items: center;

        .star {
          height: 22rpx;
          display: flex;

          image {
            width: 24rpx;
            height: 22rpx;
            margin-left: 4rpx;
          }
        }

        .startwo {
          height: 22rpx;
          display: flex;
          margin-left: 64rpx;
          margin-right: 8rpx;

          image {
            width: 24rpx;
            height: 22rpx;
            margin-left: 4rpx;
          }
        }

        .score {
          height: 38rpx;
          font-family: DIN, DIN;
          font-weight: bold;
          font-size: 36rpx;
          color: #D12C25;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
          margin-left: 18rpx;
        }

        .scoretwo {
          height: 38rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
          line-height: 38rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .shopTime {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        font-style: normal;
        text-transform: none;
        margin-top: 18rpx;
      }

      .distriBution {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 33rpx;
        font-style: normal;
        margin: 18rpx 0rpx;
        display: flex;

        .shoptext {
          margin-left: 16rpx;
        }
      }
      .announcement {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130606;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 18rpx;
      }
    }

    .shopImg {
      width: 156rpx;
      height: 156rpx;
      position: absolute;
      right: 32rpx;
      top: -24rpx;
      border-radius: 6rpx;
      overflow: hidden;
      border-radius: 12rpx;
      border: 1rpx solid white;
      z-index: 66;

      image {
        width: 100%;
        // height: 100%;
      }
    }
  }

  .shopNav {
    display: flex;
    border-bottom: 1rpx solid #999999;
    background-color: white;
  }

  .nav {
    width: 506rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 10rpx;
    background-color: #ffffff;
  }

  .nav-list {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;
    position: relative;
    top: 3rpx;

    .appraise {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 28rpx;
      text-align: center;
      font-style: normal;
    }
  }

  .nav-list .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #d12c25;
    line-height: 42rpx;
    text-align: center;
    font-style: normal;
  }

  .nav-list .line {
    margin-top: 10rpx;
    width: 32rpx;
    height: 6rpx;
    background-color: red;
    margin-left: 16rpx;
  }

  /* 内容 */
  .contenttabs {
    .container {
      background: #fff;
      display: flex;
      .left {
        width: 200rpx;
        overflow-y: auto;
        height: calc(100vh - 850rpx);

        .left_item {
          width: 100%;
          // height: 76rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          // text-align: center;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #494949;
          text-align: center;
          font-style: normal;
          background-color: #f3f3f3;
          padding:20rpx 28rpx;
        }

        .selected {
          background: #fff;
          font-weight: bold;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          font-style: normal;
        }
      }

      .right {
        padding: 6rpx 32rpx 0 24rpx;
        flex: 1;
        overflow-y: auto;
        height: calc(100vh - 850rpx);
        .right_item {
          font-size: 24rpx;
          flex: 1;
          box-sizing: border-box; //padding、border不影响元素的宽高
          margin-top: 18rpx;
          display: flex;

          .goods {
            width: 314rpx;
            margin-left: 24rpx;
            position: relative;

            .goodsname {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #000000;
              line-height: 38rpx;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }

            .Sold {
              width: 92rpx;
              height: 28rpx;
              background: rgba(255, 0, 0, 0.1);
              border-radius: 198rpx 198rpx 198rpx 198rpx;
              text-align: center;
              margin-top: 6rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 20rpx;
              color: #ff0000;
              line-height: 28rpx;
              font-style: normal;
            }

            .goodsPrice {
              height: 50rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 20rpx;
              color: #ff0000;
              // line-height: 23rpx;
              text-align: justified;
              font-style: normal;
              text-transform: none;
              margin-top: 18rpx;

              .priceNum {
                font-size: 26rpx;
              }

              .compute {
                height: 40rpx;
                right: 0;
                bottom: 0;
                display: flex;

                .addimg {
                  width: 40rpx;
                  height: 40rpx;
                  background: #d12c25;
                  border-radius: 4rpx 4rpx 4rpx 4rpx;
                  margin-left: 18rpx;
                }

                .delimg {
                  width: 40rpx;
                  height: 40rpx;
                  background: #d12c25;
                  border-radius: 4rpx 4rpx 4rpx 4rpx;
                  margin-left: 0rpx;
                }

                text {
                  height: 36rpx;
                  font-family: PingFang SC, PingFang SC;
                  font-weight: bold;
                  font-size: 28rpx;
                  color: #000000;
                  line-height: 34rpx;
                  font-style: normal;
                  margin-left: 18rpx;
                }
              }
            }
          }
        }
      }

      .left::-webkit-scrollbar {
        display: none;
      }

    ::v-deep ::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
		} 
    }

    .comments {
      padding: 24rpx 0;
      border-bottom: 1rpx solid #999999;

      .commentone {
        display: flex;

        .avatar {
          width: 68rpx;
          height: 68rpx;
          margin-right: 16rpx;
          border-radius: 50%;
        }

        .person {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4rpx;
        }

        image {
          width: 24rpx;
          height: 22rpx;
        }

        .datatime {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 28rpx;
          text-align: right;
          font-style: normal;
          text-transform: none;

        }
      }
      .commenttwo {
        margin-top: 24rpx;
      }
      .commentthree {
        display: flex;
        padding: 24rpx 0;
        flex-wrap: wrap;
        // border-bottom: 1rpx solid #ccc;
        .evaluateImg {
          width: 212rpx;
          height: 140rpx;
          border-radius: 12rpx;
          margin-left: 14rpx;
          margin-bottom: 14rpx;
          overflow: hidden;
        }
      }
      .commentfour {
        display: flex;
        padding: 24rpx 0;
        flex-wrap: wrap;
        .evaluateImg {
          width: 212rpx;
          height: 140rpx;
          border-radius: 12rpx;
          margin-left: 14rpx;
          margin-bottom: 14rpx;
          overflow: hidden;
        }
        // image {
        //   width: 212rpx;
        //   height: 140rpx;
        //   border-radius: 12rpx;
        //   margin-left: 14rpx;
        // }
      }
      .reply {
        width: 100%;
        padding: 16rpx 32rpx;
        background-color: #F2F2F2;
      }
    }

    .detail {
      // width: 686rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      line-height: 33rpx;
      font-style: normal;

      .detailone {
        display: flex;
        justify-content: space-between;
        margin-top: 24rpx;
      }
    }
  }

  .bottomshop {

    .shopcar {
      width: 686rpx;
      height: 96rpx;
      background-color: #333333;
      border-radius: 176rpx;
      position: fixed;
      z-index: 999;
      left: 32rpx;
      bottom: 64rpx;
      display: flex;

      .popupbottom {
        position: fixed;
        bottom: 162rpx;
        left: 32rpx;
        z-index: 888;
      }

      .round {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-left: 32rpx;
        margin-top: -26rpx;
        position: relative;

        image {
          width: 100rpx;
          height: 100rpx;
        }

        .shoprightnum {
          width: 32rpx;
          height: 32rpx;
          background: #d12c25;
          position: absolute;
          right: 0;
          z-index: 999;
          top: 0;
          border-radius: 50% 50%;
          line-height: 32rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #ffffff;
          text-align: center;
          font-style: normal;
        }
      }

      .choose {
        width: 360rpx;
        height: 96rpx;
        margin-left: 32rpx;

        .chooseprice {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 40rpx;
          color: #ffffff;
          line-height: 44rpx;
          font-style: normal;
          margin-top: 12rpx;
        }

        .choosegoods {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
          line-height: 28rpx;
          font-style: normal;
        }
      }

      .choosebutton {
        width: 174rpx;
        height: 96rpx;
        background: linear-gradient(270deg, #d12c25 0%, #d12c25 100%);
        border-radius: 0rpx 176rpx 176rpx 0rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 96rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }


  .bottomBg {
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 985;
    height: 96rpx;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .popbox {
    width: 100vw;
    height: 100vh;
    background-color: rgba(44, 41, 41, 0.281);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 991;
  }

  .popupbox {
    width: 686rpx;
    position: fixed;
    left: 32rpx;
    bottom: 130rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    z-index: 991;
    transition: all 0.3s ease;
    transform: translateY(0%) !important;
  
    .popboxtop {
      width: 622rpx;
      height: 96rpx;
      background-color: white;
      display: flex;
      margin-left: 32rpx;
      border-bottom: 1rpx solid black;
      justify-content: space-between;
      align-items: center;

      .popboxtext {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 96rpx;
        text-align: center;
        font-style: normal;
        margin-top: 32rpx;
      }

      .Selected {}

      image {
        width: 28rpx;
        height: 24rpx;
        margin-top: 40rpx;
      }

      .popboxtext {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 96rpx;
        text-align: center;
        font-style: normal;
        margin-top: 32rpx;
      }

      .Selected {
        color: #000000;
        margin-left: 8rpx;
      }

      .empty {
        color: #d12c25;
      }
    }

    .popboxbottom {
      // margin: 0 32rpx 120rpx 32rpx;
	  padding-bottom: 70rpx;
      height: 600rpx;
      overflow-y: auto;
      z-index: 1000;
      .popboxbottomlist {
        display: flex;
		padding: 0 40rpx;
        margin-top: 24rpx;
        justify-content: space-between;
        line-height: 40rpx;

        .popcompute {
          display: flex;
          height: 40rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 33rpx;
          font-style: normal;
          justify-content: space-around;
          align-items: center;
        }

        .adddelstyle {
          color: #d12c25;
          font-weight: bold;
          font-size: 28rpx;
          margin: 0 18rpx;
        }
      }
    }
    .popboxbottom::-webkit-scrollbar {
      display: none;
    }
  }

  .report {
    margin: 0 32rpx 200rpx 32rpx;
    padding: 32rpx 24rpx 0 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;

    .reportlistpicker {
      width: 100%;
      border: 1rpx solid #ccc;
      display: flex;
      align-items: center;
      margin-top: 24rpx;
      justify-content: space-between;
      border-radius: 12rpx;
      padding: 0 24rpx;

    }

    .reportlist {
      border: 1rpx solid #ccc;
      display: flex;
      align-items: center;
      margin-top: 24rpx;
      justify-content: space-between;
      border-radius: 12rpx;
      padding: 24rpx;
    }
  }

  .addyes {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
    width: 686rpx;
    height: 96rpx;
    background-color: #d12c25;
    margin: 100rpx 32rpx;
  }

  .pre-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    // .pre-box ::v-deep(.data-v-2e00e22c) {
    // 	width: 0rpx;
    // }	
    .pre-item {
      width: 160rpx;
      height: 150rpx;
      border-radius: 12rpx;
      overflow: hidden;
      position: relative;
      margin: 0 10rpx;
      margin-bottom: 20rpx;
      display: flex;
    }

    .pre-item-image {
      width: 100%;
      height: 100%;
    }

    .u-delete-icon {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      z-index: 10;
      background-color: $u-type-error;
      border-radius: 100rpx;
      width: 44rpx;
      height: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .u-progress {
    position: absolute;
    bottom: 10rpx;
    left: 8rpx;
    right: 8rpx;
    z-index: 9;
    width: auto;
  }
}  

</style>
